<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Registration page</title>
    <script type="text/javascript" src="../../resources/js/jquery-1.6.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery.form.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery-validation-1.8.0/jquery.validate.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery-validation-1.8.0/additional-methods.js"></script>
    <script type="text/javascript" src="../../resources/js/jquery-ui-1.8.11.custom.min.js"></script>

    <script type="text/javascript" src="../../resources/js/fancybox/jquery.fancybox-1.3.4.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="../../resources/js/fancybox/jquery.fancybox-1.3.4.css"/>

    <link rel="stylesheet" type="text/css" media="screen" href="../../resources/css/start/jquery-ui-1.8.10.custom.css"/>
    <style type="text/css">
        * {
            font-family: Verdana;
            font-size: 96%;
        }

        label {
            width: 20em;
            float: left;
        }

        label.error {
            float: none;
            color: red;
            padding-left: .5em;
            vertical-align: top;
        }

        p {
            clear: both;
        }

        .submit {
            margin-up:2em;
            margin-left: 30em;
        }

        em {
            font-weight: bold;
            padding-right: 1em;
            vertical-align: top;
        }
        body {
            font-size: 120%;
            font-weight: bold;
        }
    </style>
    <script>
        $(document).ready(function() {

        $("#rules").fancybox({
            'width'             : '75%',
            'height'            : '90%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });

            $("#cdateOfBirth").datepicker({
                        dateFormat : "yy-mm-dd",
                        maxDate : 0,
                        yearRange: '1900:+0',
                        minDate: new Date(1900, 1 - 1, 1),
                        changeMonth : true,
                        changeYear : true
                    });

            // $('#registrationForm').ajaxForm(function(e){
            //window.parent.closeIframe();
            //});

            $("#ccity").autocomplete({
                        source: function(request, response) {
                            jQuery.ajax({
                                        url : "/search/cities",
                                        dataType : "json",
                                        data : {
                                            term : request.term
                                            //groupId : $("#groupId").val();
                                        },
                                        success : function(data) {
                                            response(jQuery.map(data, function(item) {
                                                return {
                                                    label: item.ruName,
                                                    value: item.ruName,
                                                    id: item.idCity
                                                }
                                            }))
                                        }
                                    })
                        },
                        select: function(event, ui) {
                            if (ui.item) {
                                putCityId(ui.item.id);
                            }
                        },
                        minLength : 2,
                        open : function() {
                            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                        },
                        close: function() {
                            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                        }
                    });

            $("#checkbox").buttonset();

            $("#registrationForm").validate({
                        submitHandler: function() {
                            if (fileExist() && findSize() && checkFileExtension()){
                            postSubmit();
                            alert("Проверьте почту для окончания регистрации");
                            }
                        },
                        rules: {
                            email: {
                                required: true,
                                email: true,
                                remote: "validation/checkEmail"
                            },
                            firstName: {
                                required: true,
                                minlength: 2,
                                maxlength: 24
                            },
                            lastName: {
                                required: true,
                                minlength: 2,
                                maxlength: 24
                            },
                            pass: {
                                required: true,
                                minlength: 6

                            },
                            confPass: {
                                required: true,
                                minlength: 6,
                                equalTo: "#cpass"
                            },
                            city: {
                                min: 1,
                                required: true
                                //remote: "validation/checkCity"
                            },
                            jobTypes: {
                                required: true
                            },
                            about: {
                                required: true
                            },
                            organization: {
                                required: true
                            },
                            convention: {
                                required: true
                            }
                        },
                        messages: {
                            email: {
                                required: "Это поле обязательно для заполнения",
                                email: "Введенный Вами адресс не является валидным",
                                remote: jQuery.format("{0} уже используется другим пользователем")
                            },
                            firstName: {
                                required: "Это поле обязательно для заполнения",
                                minlength: "Минимальная длинна имени - 2 символа",
                                maxlength: "Максимальная длинна имени - 24 символа"
                            },
                            lastName: {
                                required: "Это поле обязательно для заполнения",
                                minlength: "Минимальная длинна фамилии - 2 символа",
                                maxlength: "Максимальная длинна фамилии - 24 символа"
                            },
                            pass: {
                                required: "Это поле обязательно для заполнения",
                                minlength: "Минимальная длинна пароля - 6 символов"

                            },
                            confPass: {
                                required: "Это поле обязательно для заполнения",
                                minlength: "Минимальная длинна пароля - 6 символов",
                                equalTo: "Пароли не совпадают"
                            },
                            city: {
                                min: "К сожалению, такого города нет в нашей базе данных",
                                required: "Это поле обязательно для заполнения",
                                remote: "К сожалению, такого города нет в нашей базе данных"
                            },
                            jobTypes: {
                                required: "Это поле обязательно для заполнения"
                            },
                            about: {
                                required: "Это поле обязательно для заполнения"
                            },
                            organization: {
                                required: "Это поле обязательно для заполнения"
                            },
                            convention: {
                                required: "Примите пожалуйста правила пользования сервисом"
                            }
                        }
                    });
        });

        function putCityId(idCity) {
            $("#idCity").val(idCity);
        }

    function findSize() {
    if ( $.browser.msie ) {
       var a = document.getElementById('cimage').value;
           $('#myImage').attr('src',a);
           var imgbytes = document.getElementById('myImage').fileSize;
           //var imgkbytes = Math.round(parseInt(imgbytes)/1024);
           if (imgbytes>100000) {
           alert("Размер фотографии превышает 100кб. Добавьте пожалуйста фотографию с меньшим размером!");
                   return false; }
                   else {return true;}
    }else {
           var fileInput = $("#cimage")[0];
           var imgbytes = fileInput.files[0].fileSize; // Size returned in bytes.
           //var imgkbytes = Math.round(parseInt(imgbytes)/1024);
           if (imgbytes>100000) {
           alert("Размер фотографии превышает 100кб. Добавьте пожалуйста фотографию с меньшим размером!");
                   return false; }
                   else {return true;}
     }
}

function checkFileExtension(){
     var filename;

      if ( $.browser.msie ) {
      filename =  document.getElementById('cimage').value;

    }else {
           var fileInput = $("#cimage")[0];
           filename =  fileInput.value;

     }

    var ext = filename.split('.').pop();
    if((ext!="jpg") && (ext!="jpeg")) {
        alert("Допустимы фотографии только в формате jpg!");
        return false;
    }
    return true;
}

function fileExist(){
       if ( $.browser.msie ) {
       var a = document.getElementById('cimage').value;
           $('#myImage').attr('src',a);
           return document.getElementById('myImage').fileSize;


    }else {
           var fileInput = $("#cimage")[0];
           return fileInput.files[0].fileSize; // Size returned in bytes.

     }

}



    </script>

</head>
<body>


<sf:form class="cmxform" modelAttribute="employer" id="registrationForm" method="post" action="/registration/registerEmployer.do"
      enctype="multipart/form-data">
    <fieldset>
        <!--<legend>Пожалуйста введите информацию о себе</legend>-->

        <p>
            <label for="cemail">E-Mail *</label>
            <em></em><sf:input id="cemail" path="email" name="email" size="25" class="required"/>
        </p>

        <p>
            <label for="cpass">Пароль *</label>
            <em></em><sf:input id="cpass" name="pass" path="password" type="password" size="25" class="required"/>
        </p>

        <p>
            <label for="cconfPass">Подтверждение пароля *</label>
            <em></em><input id="cconfPass" name="confPass" type="password" size="25" class="required"/>
        </p>

        <p>
            <label for="cfirstName">Имя *</label>
            <em></em><sf:input path="firstName" id="cfirstName" name="firstName" size="25" class="required"/>
        </p>

        <p>
            <label for="clastName">Фамилия *</label>
            <em></em><sf:input path="lastName" id="clastName" name="lastName" size="25" class="required"/>
        </p>

        <p>
            <label for="corganization">Организация *</label>
            <em></em><sf:input path="organization" id="corganization" name="organization" size="25"/>
        </p>

        <p>
            <img id="myImage" src="" style="display:none;"><br>
            <label for="cimage">Фотография </label>
            <em> </em><input type="file" id="cimage" name="file" size="25"/>
        </p>


        <p>
            <label for="ccity">Город *</label>
            <em></em><input id="ccity" title="Начните печатать название города и выберите Ваш город из выпавшего списка."
            name="visicity" size="25" class="required"/>
            <sf:input path="city" id="idCity" type="hidden" name="city" />
        </p>

        <p>
            <label for="cphone">Телефон  </label>
            <em></em><sf:input path="phone" id="cphone" name="phone" size="25"/>
        </p>

        <p>
            <label for="cskype">Skype  </label>
            <em></em><sf:input path="skype" id="cskype" name="skype" size="25"/>
        </p>

        <p>
            <label for="cicq">Icq  </label>
            <em></em><sf:input path="icq" id="cicq" name="icq" size="25"/>
        </p>

        <p>
            <label for="cabout">О себе *</label>
            <em></em><sf:textarea path="about" id="cabout" name="about"/>
        </p>

        <p>
            <label for="cjobTypesEnd">Предпочитаемые типы работ *</label><em></em>

        <div id="checkbox">
            <c:forEach var="jobType" items="${jobTypes}">
                <sf:input path="jobTypes" id="jobTypes${jobType.idJob }" type="checkbox" name="jobTypes" value="${jobType.idJob}"
                       class="required"/>
                <label for="jobTypes${jobType.idJob }">${jobType.title}</label>
            </c:forEach>
            <input id="cjobTypesEnd" type="hidden"/>
        </div>
        </p>

        <p>
            <label for="cconvention">Я ознакомлен и принимаю <a id="rules" href="/validation/rules">правила</a> данного сервиса</label>
            <em></em><input type="checkbox" id="cconvention" name="convention" value=""/>
        </p>

        <sf:errors path="*" cssStyle="color: red"/>

        <input class="submit" type="submit" value="Зарегистрироватся"/>

    </fieldset>
</sf:form>
</body>
</html>